<template>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 屏幕滑动触底了就自动执行 onload函数， 自动吧loading修改为true
// 如果开始的数据没有铺满整个屏幕，也会自动发请求，将loading修改为true
const loading = ref(false)
const finished = ref(false)
const list = ref<any[]>([1, 2, 3])

const onLoad = () => {
  setTimeout(() => {
    list.value.push(4, 5, 6, 7)
    loading.value = false
  }, 1000)
}
</script>
